<template>
  <ag-popup v-model="visible" :title="title" @onCancel="onCancel" class="popup-box" ref="popupBox">
    <div class="content">
      <section>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="搜索字段" v-if="visible">
            <el-col :span="6">
              <el-select class="form-field" v-model="form.field" @change="changeField" placeholder="请选择字段" size="small"
                style="margin-right: 8px;">
                <el-option :label="item.alias" :value="item.name" v-for="(item,index) in fields " :key="index">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="form-start" v-show="isShowRange">
              <el-input v-model="form.start" placeholder="输入范围" size="small"></el-input>
            </el-col>
            <el-col class="line" :span="1" style="width: 7px;" v-show="isShowRange">-</el-col>
            <el-col :span="4" v-show="isShowRange" style="width: 100px;">
              <el-input class="form-end" v-model="form.end" placeholder="输入范围" size="small"
                @keyup.enter.native="rangeQuery">
                <i slot="suffix" @click="rangeQuery" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <label class="el-form-item__label" style="margin-left: 20px;">精确查询</label>
            <el-col class="form-keyword" :span="5">
              <el-input v-model="form.exactValue" size="small" placeholder="输入精确值"
                @keyup.enter.native="exactQuery">
                <i slot="suffix" @click="exactQuery" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <label class="el-form-item__label" style="width: 82px;" v-show="!isShowRange">模糊查询</label>
            <el-col class="form-keyword" :span="5" v-show="!isShowRange">
              <el-input v-model="form.fuzzyValue" size="small" placeholder="输入关键字"
                @keyup.enter.native="fuzzyQuery">
                <i slot="suffix" @click="fuzzyQuery" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </section>

      <div class="my-vxe-box">
        <div v-show="fields.length==0">请先定位到图层,待图层加载好，再进行查看。</div>
        <vxe-table border show-overflow highlight-hover-row ref="xTable1" class="mytable" height="300"
          :sort-config="{trigger: 'cell'}" :row-config="{height: 32}" :column-config="{resizable: true}"
          :scroll-y="{mode: 'wheel'}" @cell-dblclick="cellDBLClickEvent" 
          @scroll="scrollEvent" @checkbox-change="selectChangeEvent" @checkbox-all="selectAll">
          <vxe-column fixed="left" type="checkbox" width="36"></vxe-column>
          <vxe-column v-for="item in fields" :field="item.name" :title="item.name" :key="item.key" width="150" sortable>
            <template #header>
              <span :id="item.name">{{item.alias}}</span>
            </template>
          </vxe-column>
        </vxe-table>
        <div class="border-active" :style="borderActiveStyle"></div>
      </div>
    </div>
  </ag-popup>
</template>
<script>
  import Vue from "vue";
  import XEUtils from 'xe-utils'
  import {
    VXETable,
    Header,
    Column,
    Table
  } from 'vxe-table'
  import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
  VXETable.setup({
    i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
  })
  Vue.use(Header).use(Column).use(Table)

  import AgPopup from "@/views/components/precut/AgPopup.vue";
  import LayerProperty from './js/LayerProperty.js';
let tableData = [];
let StyleCondition = agcim.renderer.StyleCondition;
let styleCondition = null;
let tileset = null;
  export default {
    components: {
      "ag-popup": AgPopup
    },
    data() {
      return {
        visible: false,
        title: '图层属性表',
        //字段选中样式
        borderActiveStyle: '',
        //隐藏字段选中样式
        borderActiveStyleHide: '',
        //是否选择状态
        isChangeFiled: true,
        //表头
        fields: [],
        //显示范围
        isShowRange: false,
        //搜索字段
        form: {
          field: '',
          start: '',
          end: '',
          exactValue: '',
          fuzzyValue: "",
          query: {}
        },
      };
    },
    methods: {
      onShow(o) {
        this.form = {
          field: '',
          start: '',
          end: '',
          exactValue: '',
          fuzzyValue: "",
          query: {}
        };
        this.fields = [];
        this.borderActiveStyle = ''; 
        this.visible = true;
        this.title = o.nameCn + '属性表';
        this.displayTable(o.id);
      },
      onCancel() {
        this.visible = false;
      },
      displayTable(id, filter) {
        let lyArr = CIM.layerTree._aglayers.filter(item => {
          return item.id == id
        });
        tileset = lyArr[0]._primitives[0];
        styleCondition = new StyleCondition(tileset);
        let layerProperty = new LayerProperty();
        tableData = layerProperty.getData(lyArr[0]);
        this.fields = layerProperty.fields;
        let $table = this.$refs.xTable1;
        $table.loadData(tableData);
      },
      //搜索范围 数字
      rangeQuery() {
        let $table = this.$refs.xTable1;
        if (this.form.field && this.form.start && this.form.end) {
          let arr = tableData.filter((item) => {
            let num = item[this.form.field];
            num = parseInt(num);
            if (this.form.start < num && num < this.form.end) {
              return true;
            }
          });
          $table.loadData(arr);
        } else {
          $table.loadData(tableData);
        }
      },
      //精确查询
      exactQuery() {
        let $table = this.$refs.xTable1;
        if (this.form.field && this.form.exactValue) {
          let arr = tableData.filter((item) => {
            let val = item[this.form.field];
            if (val == this.form.exactValue) {
              return true;
            }
          });
          $table.loadData(arr);
        } else {
          $table.loadData(tableData);
        }
      },
      //模糊查询
      fuzzyQuery() {
        let $table = this.$refs.xTable1;
        if (this.form.field && this.form.fuzzyValue) {
          let arr = tableData.filter((item) => {
            let val = item[this.form.field];
            if (val instanceof Array) {
              val = val.toString();
            }
            return val.indexOf(this.form.fuzzyValue) > -1;
          });
          $table.loadData(arr);
        } else {
          $table.loadData(tableData);
        }
      },
      //双击定位----需要有入库的数据
      cellDBLClickEvent({
        row,
        column
      }) {
        console.log(row)

        this.setStyle([row])
        
      },
      //某个字段展示
      changeField(fieldName) {
        this.isShowRange = !this.isShowRange;
        this.isChangeFiled = true;

        let index = this.fields.findIndex((item) => {
          return item.name == fieldName
        });
        let hDom = document.getElementsByClassName('vxe-header--column')
        let scrollWidth = 0;

        for (let i = 1; i < index+1; i++) {
          scrollWidth = scrollWidth + hDom[i].offsetWidth;
        }
        let scrollDom = document.getElementsByClassName('vxe-table--body-wrapper')[0];
        scrollDom.scrollLeft = scrollWidth;
        this.borderActiveStyleHide = scrollDom.scrollLeft;

        let activeDom = document.getElementById(fieldName);
        let borderWidth = activeDom.parentNode.parentNode.offsetWidth;
        let w1 = document.getElementsByClassName('vxe-table--body')[0].offsetWidth;
        let moreWidth = scrollWidth - (w1 - scrollDom.clientWidth );
        if (moreWidth > 0) {
          this.borderActiveStyle = `opacity:1;width:${borderWidth}px; transform: translateX(${moreWidth}px)`;
        } else {
          this.borderActiveStyle = `opacity:1;width:${borderWidth}px; `;
        }

        setTimeout(() => {
          this.isChangeFiled = false;
        }, 500);
      },
      scrollEvent({
        scrollTop,
        scrollLeft
      }) {
        if (!this.isChangeFiled && scrollLeft != this.borderActiveStyleHide) {
          this.borderActiveStyle = `opacity:0;width:0; `;
        }
      },
      selectChangeEvent ({ checked, row }) {
        const records = this.$refs.xTable1.getCheckboxRecords();
        this.setStyle(records)
      },
      selectAll () {
        const records = this.$refs.xTable1.getCheckboxRecords();
        this.setStyle(records)
      },
      setStyle (records) {
        let cons = []
        for (let index = 0; index < records.length; index++) {
          let con = '${FID} === "'+records[index].FID+'"'
          cons.push([con,'rgb(237, 240, 0)']);
        }
        // cons.push(['${DISTNAME} === "天河"','rgba(45, 0, 75, 0.5)'])
        cons.push(['true', 'rgb(255, 255, 255)']);
        styleCondition.setColorStyle(cons);
      }
    }
  };
</script>

<style scoped>
  .my-vxe-box {
    position: relative;
  }

  .border-active {
    position: absolute;
    top: 0;
    left: 36px; 
    /* checkbox宽度 */
    height: 286px;
    border: 1px solid #FED430;
    opacity: 0;
    pointer-events: none;
  }

  .popup-box {
    min-width: 400px;
    width: 640px;
    left: 50%;
    top: 20%;
  }

  .popup-box .content {
    padding: 20px;
  }


  ::v-deep .el-form .el-form-item__label {
    color: #fff;
  }

  .el-form-item__label {
    padding: 0 8px 0 0
  }

  ::v-deep .vxe-icon--caret-top:before {
    content: "";
    position: absolute;
    left: 0.1em;
    top: -3px;
    display: inline-block;
    border: solid 6px transparent;
    border-bottom-color: #fff;
  }
  ::v-deep .vxe-icon--caret-top.sort--active:before {
    content: "";
    position: absolute;
    left: 0.1em;
    top: -3px;
    display: inline-block;
    border: solid 6px transparent;
    border-bottom-color: #409eff;
  }
  ::v-deep .vxe-icon--caret-bottom:before {
    content: "";
    position: absolute;
    left: 0.1em;
    bottom: -3px;
    display: inline-block;
    border: solid 6px transparent;
    border-top-color: #fff;
  }
  ::v-deep .vxe-icon--caret-bottom.sort--active:before {
    content: "";
    position: absolute;
    left: 0.1em;
    bottom: -3px;
    display: inline-block;
    border: solid 6px transparent;
    border-top-color: #409eff;
  }

  ::v-deep .vxe-table--render-default {
    color: #fff;
    background: transparent;
  }

  ::v-deep .vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line {
    border-bottom: rgba(255, 255, 255, 0.15);
  }

  ::v-deep .vxe-table--render-default .vxe-table--border-line {
    border-color: rgba(255, 255, 255, 0.15);
  }

  ::v-deep .vxe-table .vxe-table--header-wrapper {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
  }

  ::v-deep .vxe-table--render-default .vxe-table--body-wrapper {
    background: transparent;
  }

  ::v-deep .vxe-table--render-default.border--default .vxe-table--header-wrapper,
  .vxe-table--render-default.border--full .vxe-table--header-wrapper,
  .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
    background-color: transparent;
  }

  ::v-deep .vxe-table--render-default .vxe-body--row.row--hover {
    background-color: rgba(255, 255, 255, 0.3);
  }

  ::v-deep .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
    padding: 5px 0;
    font-size: 12px;
  }


  ::v-deep .vxe-table--body-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    border-radius: 5px;
    background: #5C6977;
  }

  ::v-deep .vxe-table--render-default.border--full .vxe-body--column,
  ::v-deep .vxe-table--render-default.border--full .vxe-header--column {
    background-image: linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 30%)), linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 30%));
  }

  ::v-deep .vxe-table--render-default .vxe-header--column.col--current,
  ::v-deep .vxe-table--render-default .vxe-body--column.col--current {
    background-color: transparent;
  }

  ::v-deep .vxe-table--render-default.column--highlight .vxe-header--column:not(.col--seq):hover {
    background-color: rgba(255, 255, 255, 0.3);
  }

  ::v-deep .vxe-table--render-default .vxe-body--row.row--current {
    background-color: rgba(255, 255, 255, 0.3);
  }

  ::v-deep .col-active-red {
    background-color: rgba(255, 255, 255, 0.3);
  }

  .mytable ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  /* 轨道 */
  ::v-deep .vxe-table--body-wrapper::-webkit-scrollbar-track {
    border-radius: 4px;

    background: #5C6977;
  }

  /* 滑块 */
  ::v-deep .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #E3EAF3;
  }
  ::v-deep .vxe-table--render-default .vxe-body--row.row--hover {
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid #408eda;
  }
 ::v-deep .vxe-table--render-default .vxe-body--row .vxe-body--column.col--checkbox{
   background: rgb(255, 255, 255,0);
   border-right: 1px rgba(255, 255, 255, 0.2) solid;
   border-bottom: 1px rgba(255, 255, 255, 0.2) solid;
  }
  ::v-deep .vxe-table--body{
    border-collapse: collapse;
  }
   ::v-deep .vxe-table--render-default .vxe-body--row .vxe-body--column.col--checkbox{
    background-color:#303133
  }
  ::v-deep .vxe-header--column.col_2.col--checkbox.col--fixed{
    background-color:#303133
  }
</style>